<template>
  <div class="min-h-screen bg-gray-900 text-white overflow-hidden">
    <!-- 背景粒子效果 -->
    <Particles id="tsparticles" :options="particlesOptions" />

    <!-- 顶部导航 -->
    <nav class="relative z-10 py-4 px-6 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">计算机协会</span>
      </div>
    </nav>

    <!-- 主要内容 -->
    <main class="relative z-10 container mx-auto px-6 py-16">
      <div class="flex flex-col lg:flex-row items-center">
        <!-- 左侧内容 -->
        <div class="lg:w-1/2 mb-12 lg:mb-0">
          <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">
            探索<span class="text-cyan-400">数字世界</span>的无限可能
          </h1>
          <p class="text-lg text-gray-300 mb-8">
            加入我们，成为计算机协会的一员，共同探索前沿技术，参与精彩活动，提升编程技能。
          </p>
          <div class="flex space-x-4">
            <el-button type="primary" size="large" @click="showLogin = true">立即加入</el-button>
          </div>
          
          <!-- 协会数据展示 -->
          <div class="mt-16 grid grid-cols-2 md:grid-cols-3 gap-6">
            <div class="bg-gray-800 bg-opacity-50 p-4 rounded-xl backdrop-blur-sm">
              <div class="text-3xl font-bold text-cyan-400">300+</div>
              <div class="text-gray-400">社团人数</div>
            </div>
            <div class="bg-gray-800 bg-opacity-50 p-4 rounded-xl backdrop-blur-sm">
              <div class="text-3xl font-bold text-cyan-400">50+</div>
              <div class="text-gray-400">技术项目</div>
            </div>
            <div class="bg-gray-800 bg-opacity-50 p-4 rounded-xl backdrop-blur-sm">
              <div class="text-3xl font-bold text-cyan-400">12</div>
              <div class="text-gray-400">社团年度活动</div>
            </div>
          </div>
        </div>

        <!-- 右侧展示区 -->
        <div class="lg:w-1/2">
          <!-- 3D卡片轮播 -->
          <div class="relative h-96">
            <div class="absolute inset-0 flex items-center justify-center">
              <div class="relative w-full h-full max-w-md">
                <!-- 主卡片 -->
                <div class="absolute z-10 w-full h-full transform transition-all duration-500" 
                  :style="{
                    transform: `rotateY(${currentCard * 30}deg) rotateX(${currentCard * 10}deg)`,
                    opacity: 1 - Math.abs(currentCard) * 0.3
                  }">
                  <div class="bg-gradient-to-br from-cyan-900 to-blue-900 rounded-2xl p-6 h-full shadow-2xl flex flex-col">
                    <div class="flex-1 flex items-center justify-center">
                      <img :src="cards[activeCard].image" alt="活动图片" class="max-h-48 rounded-lg shadow-lg">
                    </div>
                    <div class="mt-4">
                      <h3 class="text-xl font-bold">{{ cards[activeCard].title }}</h3>
                      <p class="text-gray-300 mt-2">{{ cards[activeCard].description }}</p>
                    </div>
                  </div>
                </div>
                
                <!-- 左右卡片 -->
                <div v-for="i in [-1, 1]" :key="i" 
                  class="absolute w-full h-full transform transition-all duration-500"
                  :style="{
                    transform: `rotateY(${(currentCard + i) * 30}deg) rotateX(${(currentCard + i) * 10}deg)`,
                    opacity: 0.6 - Math.abs(currentCard + i) * 0.3,
                    left: i === -1 ? '-20%' : '20%',
                    zIndex: 5 - Math.abs(i)
                  }">
                  <div class="bg-gradient-to-br from-cyan-900 to-blue-900 rounded-2xl p-6 h-full shadow-xl">
                    <div class="h-full flex items-center justify-center">
                      <img :src="cards[(activeCard + i + cards.length) % cards.length].image" 
                           alt="活动图片" class="max-h-32 rounded-lg">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 导航按钮 -->
            <button @click="prevCard" class="absolute left-0 top-1/2 -translate-y-1/2 bg-gray-800 bg-opacity-50 p-2 rounded-full hover:bg-cyan-600 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <button @click="nextCard" class="absolute right-0 top-1/2 -translate-y-1/2 bg-gray-800 bg-opacity-50 p-2 rounded-full hover:bg-cyan-600 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </main>

    <!-- 特色部分 -->
    <section class="relative z-10 py-16 bg-gray-800 bg-opacity-50 backdrop-blur-sm">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold text-center mb-12">我们的<span class="text-cyan-400">特色</span></h2>
        
        <div class="grid md:grid-cols-3 gap-8">
          <div v-for="(feature, index) in features" :key="index" 
               class="bg-gray-900 p-6 rounded-xl hover:shadow-lg hover:shadow-cyan-500/20 transition-all duration-300">
            <div class="w-12 h-12 bg-cyan-900 rounded-lg flex items-center justify-center mb-4">
              <component :is="feature.icon" class="h-6 w-6 text-cyan-400" />
            </div>
            <h3 class="text-xl font-bold mb-2">{{ feature.title }}</h3>
            <p class="text-gray-400">{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 登录弹窗 -->
    <el-dialog v-model="showLogin" width="90%" :fullscreen="isMobile" class="max-w-md">
      <div class="p-6">
        <div class="text-center mb-6">
          <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          </div>
          <h3 class="text-xl font-bold text-gray-800">计算机协会系统</h3>
          <p class="text-gray-600 mt-1">请输入您的账号信息</p>
        </div>

        <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="用户名/邮箱" size="large" :prefix-icon="User" />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" show-password size="large" :prefix-icon="Lock" />
          </el-form-item>
          
          
          <el-button type="primary" size="large" class="w-full" @click="submitLogin" :loading="loginLoading">登录</el-button>
        </el-form>

        <div class="relative my-6">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-200"></div>
          </div>
        </div>
        
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { User, Lock, Code, Terminal, Users, Award, BookOpen, School } from 'lucide-vue-next'

const showLogin = ref(false)
const loginLoading = ref(false)
const loginFormRef = ref()
const activeCard = ref(0)
const currentCard = ref(0)

const isMobile = computed(() => window.innerWidth < 768)

const loginForm = ref({
  username: '',
  password: '',
  remember: false
})

const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
}

const cards = [
  {
    title: '年度黑客马拉松',
    description: '24小时不间断编程挑战，展示你的创造力',
    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
  },
  {
    title: 'AI技术研讨会',
    description: '探索人工智能最新发展趋势与应用',
    image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
  },
  {
    title: '开源社区贡献',
    description: '与全球开发者一起参与开源项目',
    image: 'https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
  },
  {
    title: '编程竞赛训练营',
    description: '提升算法能力，备战各类编程竞赛',
    image: 'https://images.unsplash.com/photo-1542626991-cbc4e32524cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
  }
]

const features = [
  {
    icon: Code,
    title: '前沿技术',
    description: '定期分享技术趋势，保持行业知识'
  },
  {
    icon: Terminal,
    title: '实战项目',
    description: '参与真实项目开发，积累宝贵经验'
  },
  {
    icon: Users,
    title: '交流社区',
    description: '与志同道合的技术爱好者交流学习'
  },
  {
    icon: Award,
    title: '竞赛支持',
    description: '专业指导，助力各类技术竞赛'
  },
  {
    icon: BookOpen,
    title: '学习资源',
    description: '丰富的学习资料和技术文档库'
  },
  {
    icon: School,
    title: '教务系统对接',
    description: '提供教务系统对接，帮助学生查询课程信息、成绩和考试安排',
  }
]

const particlesOptions = {
  background: {
    color: {
      value: "transparent"
    }
  },
  fpsLimit: 60,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: "push"
      },
      onHover: {
        enable: true,
        mode: "repulse"
      }
    },
    modes: {
      push: {
        quantity: 4
      },
      repulse: {
        distance: 100,
        duration: 0.4
      }
    }
  },
  particles: {
    color: {
      value: "#3b82f6"
    },
    links: {
      color: "#3b82f6",
      distance: 150,
      enable: true,
      opacity: 0.3,
      width: 1
    },
    move: {
      direction: "none",
      enable: true,
      outModes: {
        default: "bounce"
      },
      random: false,
      speed: 2,
      straight: false
    },
    number: {
      density: {
        enable: true
      },
      value: 80
    },
    opacity: {
      value: 0.5
    },
    shape: {
      type: "circle"
    },
    size: {
      value: { min: 1, max: 3 }
    }
  },
  detectRetina: true
}

const nextCard = () => {
  currentCard.value += 1
  setTimeout(() => {
    activeCard.value = (activeCard.value + 1) % cards.length
    currentCard.value = 0
  }, 500)
}

const prevCard = () => {
  currentCard.value -= 1
  setTimeout(() => {
    activeCard.value = (activeCard.value - 1 + cards.length) % cards.length
    currentCard.value = 0
  }, 500)
}

const submitLogin = () => {
  loginFormRef.value.validate((valid: boolean) => {
    if (valid) {
      loginLoading.value = true
      // 模拟登录请求
      setTimeout(() => {
        loginLoading.value = false
        showLogin.value = false
        ElMessage.success('登录成功')
      }, 1500)
    }
  })
}

onMounted(() => {
  // 自动轮播
  setInterval(() => {
    nextCard()
  }, 5000)
})
</script>

<style>
/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #1a202c;
}
::-webkit-scrollbar-thumb {
  background: #4a5568;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2d3748;
}

/* 粒子画布样式 */
#tsparticles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 卡片3D效果 */
.perspective {
  perspective: 1000px;
}
</style>